<template>
	<view class="content" :class="{contentbg:!boxType}">
		<view>
			<!-- 手机号登录 -->
			<view class="login_box" v-if="boxType">

				<nav-bar title="手机号登录" fixed cover :back="false" background-color="transparent" @on-back="$navigateBack()"></nav-bar>

				<view class="uni-column" style="margin-top: 89rpx;">
					<input type="text" class="login-input" maxlength="11" focus v-model="loginForm.phone" placeholder="请输入常用手机号码" />
				</view>
				<view class="max-column">
					<view class="uni-column">
						<input class="login-input" type="text" maxlength="6" v-model="loginForm.code" placeholder="输入验证码" />
					</view>
					<view class="btn-yzm" @click="btnCode" :class="{on:count==0}">{{count==0?yzText:''}} <text v-if="count!=0">
							{{count}}s</text></view>
				</view>
				<button class="btn_login" :class="{on:loginStatus}" @tap="btnLogin">登录</button>
				<view class="changetext" @click="btnChangeLogin">微信用户快速登录</view>

				<view class="xieyi">
					<text class="iconfont  icon-gouxuan"/>
					未曾注册过的手机号，登录时将自动注册，且代表 您已阅读并同意<text class="red">《注册协议》</text>与<text class="red">《隐私政策》</text>
				</view>

			</view>
			<!-- 微信小程序登录 -->
			<view v-if="!boxType">
				<view class="xcx-box">
					<image class="xcimg" src="/static/login/1.png" />
				</view>
				
				<template v-if="auth">
					<button class="btnXCX" @tap="wxLogin">
						<image class="wximg" src="/static/login/2.png" /> 微信用户快速登录
					</button>
				</template>
				<template v-else>
					<button v-if="!weixinData" class="btnXCX" open-type="getUserInfo" @getuserinfo="userInfo">
						<image class="wximg" src="/static/login/2.png" /> 授权用户信息
					</button>
					<view v-else>
						<view class="weixin-info">
							<image :src="weixinData.avatarUrl"></image>
							<text>{{weixinData.nickName}}</text>
						</view>
						<button class="btnXCX" open-type="getPhoneNumber" @getphonenumber="wxGetPhoneLogin">
							<image class="wximg" src="/static/login/2.png" /> 微信授权登录
						</button>
					</view>
				</template>

				<view class="changetext" @click="btnChangeLogin">手机号快速登录</view>
				<view class="xieyi">
					登录即代表你同意我们的 <text class="red">《服务协议》 </text>和<text class="red">《隐私政策》</text>
				</view>
			</view>
		</view>
		<apple-sliver></apple-sliver>
	</view>
</template>

<script>
	import NavBar from "../../../components/nav-bar";
	import {captcha, weixinLogin, login, weixinRegister} from '@/api/auth.js';
	import {setToken} from "@/utils/index.js"
	import Logging from "@/common/js/logging.js";

	const phoneReg = /^1[3|4|5|6|7|8|9]\d{9}$/;
	export default {
		components: {
			NavBar,
		},
		data() {
			return {
				loginForm: {
					phone: '',
					code: '',
				},
				boxType: false,
				loginStatus: false,
				show: true,
				count: 0,
				timer: null,
				yzText: '获取验证码',
				routeParams: {
					back: false,
					redirect: ''
				},
				auth: true,
				weixinData: null,
				code: ''
			}
		},
		watch: {
			loginForm: {
				handler: function(val, oldVal) {
					if (val.phone != '' && val.code != '') {
						this.loginStatus = true;
					} else {
						this.loginStatus = false;
					}
				},
				deep: true
			},
		},
		methods: {
			btnChangeLogin() {
				this.boxType = !this.boxType;
			},
			wxLogin() {
				uni.login({
					provider: 'weixin',
					success: async(res) => {
						this.code = res.code
						try {
							const {data} = await weixinLogin({code: res.code})
							this.loginBack(data)
						} catch (err) {
							if (err.hasOwnProperty('code') && err.code == 500) {
								this.auth = false
								uni.showToast({
									icon: 'none',
									title: '未授权，请授权登录'
								})
							}
						}
					}	
				})
			},
			async userInfo(e) {
				if (e.detail.errMsg == 'getUserInfo:ok') {
					this.weixinData = e.detail.userInfo
				}
			},
			async wxGetPhoneLogin(e) {
				if (e.detail.errMsg != "getPhoneNumber:ok") {
					return;
				}
				let wxData = this.weixinData;
				let postData = {
					code: this.code,
					iv: e.detail.iv,
					encryptedData: e.detail.encryptedData,
					avatarUrl: wxData.avatarUrl,
					nickName: wxData.nickName,
					gender: wxData.gender
				}
				uni.login({
					provider: 'weixin',
					success: async (res) => {
						if (res.errMsg == 'login:ok') {
							postData.code = res.code
							try{
								const {data} = await weixinRegister(postData)
								this.loginBack(data)
							} catch(err) {
								
							}
						}
					}, 
					fail: (err) => {
						console.log(err)
					}
				})
			},
			async btnLogin() {
				try {
					let {phone, code} = this.loginForm;
					if (phone === '' || !phoneReg.test(phone)) {
						uni.showToast({
							icon: 'none',
							title: '手机号码为空或者号码不正确'
						})
						return
					}
					if (code === '') {
						uni.showToast({
							icon: 'none',
							title: '请输入验证码'
						})
						return
					}
					const {data} = await login({
						captcha: code,
						cellphone: phone
					})
					this.loginBack(data);
				} catch (err) {
					
				}
			},
			loginBack(data) {
				uni.setStorageSync("token", data);
				Logging.set(false);

				// 演示跳转到人脸识别
				let {back, redirect} = this.routeParams, params;
				params = back ? 'back=true' : '';
				params += (params ? '&' : '') + (redirect ? `redirect=${redirect}` : '')  
				uni.redirectTo({
					url: `/pages/face/face?${params}`
				})
				
			},
			async btnCode() {
				var self = this;
				try {
					let phone = self.loginForm.phone;
					if (phone === '' || !phoneReg.test(phone)) {
						uni.showToast({
							icon: 'none',
							title: '手机号码为空或者号码不正确'
						})
						return
					}
					await captcha(phone);
					self.getCode()
				} catch (err) {
					console.log(err)
				}
			},
			getCode() {
				const TIME_COUNT = 60;
				if (!this.timer) {
					this.count = TIME_COUNT;
					this.show = false;
					this.timer = setInterval(() => {
						if (this.count > 0 && this.count <= TIME_COUNT) {
							this.count--;
						} else {
							this.show = true;
							clearInterval(this.timer);
							this.timer = null;
						}
					}, 1000)
				}
			}
		},
		onLoad(option) {
			// 登录后返回到原页面
			this.routeParams.back = option.hasOwnProperty('back')
			// 登录后重定向到页面
			this.routeParams.redirect = option.redirect
		},
		navigateBackPress() {
			if (this.boxType) {
				this.boxType = !this.boxType
				return true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		text-align: center;
		height: 100vh;
		-webkit-overflow-scrolling: touch;
		background-color: #f5f5f5;
	}

	.contentbg {
		background-color: #fff;
	}

	.login_box {
		text-align: center;
	}

	.login_box .uni-column {
		position: relative;
		height: px2vw(50);
		width: px2vw(350);
		margin: 0 auto px2vw(20) auto;
		background-color: #fff;
		border: px2vw(1) solid #E5E5E5;
		border-radius: px2vw(5);
	}

	.login_box .max-column {
		position: relative;
		height: px2vw(50);
		width: px2vw(350);
		margin: 0 auto;

		.uni-column {
			height: px2vw(50);
			width: px2vw(215);
			margin: 0 auto px2vw(20) 0;

			.login-input {
				width: px2vw(100);
			}
		}

		.btn-yzm {
			height: px2vw(50);
			line-height: px2vw(50);
			width: px2vw(125);
			font-size: px2vw($fz16);
			position: absolute;
			right: 0;
			top: 50%;
			margin-top: - px2vw(25);
			background-color: #888;
			color: #fff;
			border-radius: px2vw(5);
		}

		.btn-yzm.on {
			background-color: #F24244;
		}
	}

	.login_box .uni-column .login-input {
		position: absolute;
		left: 0;
		font-size: px2vw($fz16);
		width: px2vw(200);
		text-align: left;
		bottom: px2vw(10);
		height: px2vw(30);
		line-height: px2vw(30);
		padding-left: px2vw(20);
	}

	.btn_login {
		width: px2vw(350);
		margin: 0 auto;
		margin-top: px2vw(50);
		height: px2vw(50);
		line-height: px2vw(50);
		background-color: #F4F4F4;
		text-align: center;
		font-size: px2vw($fz16);
		color: #000;
	}

	.btn_login.on {
		background-color: #F24244;
		color: #fff;
	}

	.xieyi {
		font-size: px2vw($fz14);
		color: #8D8D8D;
		position: relative;
		width: px2vw(300);
		margin: px2vw(100) auto 0 auto;
		text-align: left;
		padding: px2vw(20) px2vw(0);

		.red {
			color: #F24244;
		}

		.icon-gouxuan {
			position: absolute;
			left: - px2vw(25);
			color: #F24244;
			border: px2vw(1) solid #ddd;
			font-size: px2vw($fz14);
			height: px2vw(20);
			width: px2vw(20);
			border-radius: px2vw(5);
			text-align: center;
			line-height: px2vw(23);
		}
	}

	.xcx-box {
		text-align: center;
		width: px2vw(122);
		height: px2vw(122);
		line-height: px2vw(122);
		border-radius: px2vw(122);
		margin: px2vw(50) auto px2vw(100) auto;
		background-color: #F5F5F5;
		position: relative;

		.xcimg {
			height: px2vw(77);
			width: px2vw(70);
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: - px2vw(38.5);
			margin-left: - px2vw(35);
		}
	}

	.btnXCX {
		height: px2vw(50);
		width: px2vw(345);
		margin: 0 auto;
		text-align: center;
		line-height: px2vw(50);
		font-size: px2vw($fz16);
		color: #fff;
		background-color: #31CB08;
		border-radius: px2vw(5);

		.wximg {
			height: px2vw(23);
			width: px2vw(29);
			vertical-align: middle;
			padding-right: px2vw(5);
		}
	}

	.changetext {
		text-align: center;
		font-size: px2vw($fz16);
		padding-top: px2vw(20);
		color: #999;
	}
	
	.weixin-info{
		margin-bottom: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		
		image{
			width: 100rpx;
			height: 100rpx;
			margin-right: 20rpx;
			border-radius: 50%;
		}
	}
</style>
